<template>
	<view class="container">
		<!-- 搜索栏 -->
		<Search />
		<!-- 轮播图 -->
		<view class="swiper">
			<ASwiper :list="swiperList" />
		</view>
		<!-- 菜单 -->
		<AMenu 
			:list="menuList" 
			:width="50" 
			:height="50" 
			:marginTop="13" 
			:marginBottom="13"
			@click="handleNavigateTo" />
		<!-- 达人选品 -->
		<u-sticky bg-color="#f5f5f5" index="2" @fixed="handleFixed">
			<!-- 只能有一个根元素 -->
			<view class="sticky">
				<view class="talent">
					<view class="talent-title u-font-lg">达人选品</view>
					<view class="talent-image" @click="handleShowScreen">
						<u-image
							class="image" 
							width="40rpx" 
							height="40rpx" 
							src="/static/icons/screen_icon.png"></u-image>
					</view>
				</view>
				<ResultList :width="140" :height="60" :list="resultList" @click="handleDelete" v-if="resultList.length > 0" />
			</view>
		</u-sticky>
		<!-- 选品列表 -->
		<view class="selection">
			<SelectionList :list="selectionList" @clickFun="send"/>
		</view>
		<!-- 筛选 -->
		<u-popup 
			v-model="popShow"
			mode="center"
			width="680"
			border-radius="10">
			<ScreenList :selectionFlag="true" @click="handleConfirm" />
		</u-popup>
		<!-- tabbar -->
		<!-- <tabbarList /> -->
	</view>
</template>

<script>
// import tabbarList from '@/components/tabbar-list/index.vue'
import Search from '@/components/search/index.vue'
import ASwiper from '@/components/swiper/index.vue'
import AMenu from '@/components/menu/index.vue'
import ScreenList from '@/components/screen-list/index.vue'
import ResultList from '@/components/result-list/index.vue'
import SelectionList from '@/components/selection-list/index.vue'
export default {
	components: {
		// tabbarList
		Search,
		ASwiper,
		AMenu,
		ScreenList,
		ResultList,
		SelectionList
	},
	data() {
		return {
			popShow: false,
			resultList: [],
			swiperList: [
				{
					image: 'http://img51.ddimg.cn/79140117347201_y.jpg'
				},
				{
					image: 'http://img62.ddimg.cn/upload_img/00785/ts0219_0309/1242x366-1613634235.jpg'
				}
			],
			menuList: [
				{
					id: 1,
					name: '全部商品',
					url: require('@/static/icons/all_icon.png')
				},
				{
					id: 2,
					name: '高佣推荐',
					url: require('@/static/icons/recommend_icon.png')
				},
				{
					id: 3,
					name: '全网爆品',
					url: require('@/static/icons/burst_icon.png')
				},
				{
					id: 4,
					name: '视频素材',
					url: require('@/static/icons/video_icon.png')
				},
				{
					id: 5,
					name: '品牌优品',
					url: require('@/static/icons/superior_icon.png')
				}
			],
			selectionList: [
				{
					id: 1,
					title: '香蒲丽红公主人参果修复眼膜贴 60片装',
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg',
					fans_ask: '6000',
					price: '29.8',
					commission: '30%',
					profitable: '8',
					isFinish: false
				},
				{
					id: 2,
					title: '香蒲丽红公主人参果修复眼膜贴 60片装',
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg',
					fans_ask: '6000',
					price: '29.8',
					commission: '30%',
					profitable: '8',
					isFinish: true
				},
				{
					id: 3,
					title: '香蒲丽红公主人参果修复眼膜贴 60片装',
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg',
					fans_ask: '6000',
					price: '29.8',
					commission: '30%',
					profitable: '8',
					isFinish: false
				},
				{
					id: 4,
					title: '香蒲丽红公主人参果修复眼膜贴 60片装',
					url: 'http://img3m8.ddimg.cn/8/27/1267839548-1_b_3.jpg',
					fans_ask: '6000',
					price: '29.8',
					commission: '30%',
					profitable: '8',
					isFinish: false
				}
			]
		};
	},
	methods: {
		send(e){
			uni.navigateTo({
				url: '/pages/selection/details'
			})
		},
		handleNavigateTo(item) {
			console.log(item)
		},
		handleFixed(index) {
			
		},
		handleShowScreen() {
			this.popShow = true
		},
		handleConfirm(list) {
			this.resultList = list
			this.popShow = false
		},
		handleDelete(item) {
			this.resultList.splice(this.resultList.findIndex(option => option.id === item.id), 1)
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding-bottom: 110rpx;
	.swiper {
		background-color: $u-bg-white-color;
		padding: 14rpx 25rpx 0;
	}
	.talent {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 58rpx;
		padding: 52rpx 25rpx 20rpx;
		background-color: #f5f5f5;
		box-sizing: unset;
		&-title {
			font-weight: 600;
		}
		&-image {
			padding: 10rpx;
		}
	}
	.selection {
		padding: 0 15rpx;
	}
}
</style>
